import React, { useRef, useState } from 'react';
import { ProList } from '@ant-design/pro-components';
import { Space, Tag, Button, Progress } from 'antd';
import {useNavigate} from 'react-router-dom';

export type Props = {
  //@ts-ignore
  apiMarketInfo: API.ApiMarketInfo[];
  visible: boolean;
};

const ApiMarketList: React.FC<Props> = (props) => {
  let navigate = useNavigate();
  const { apiMarketInfo,visible } = props;
  const actionRef = useRef();
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [selectedCount, setSelectedCount] = useState<number>(0); // 添加标志位

  const rowSelection = {
    selectedKeys,
    onChange: (keys: string[]) => {
      setSelectedKeys(keys);
      setSelectedCount(keys.length); // 更新选中项数量
    },
  };

  return (
    <div
      style={{
        backgroundColor: '#000000',
        margin: -24,
        padding: 24,
      }}
    >
      <div style={{ marginBottom: 16, color: 'white' }}>
        {/* 显示选中项数量 */}
        选中项数量: {selectedCount}
      </div>
      {/*@ts-ignore*/}
      <ProList<API.ApiMarketInfo>
        actionRef={actionRef}
        rowKey="id" // 确保每一行有唯一的键
        showActions="hover"
        // @ts-ignore
        rowSelection={rowSelection} // 添加行选择
        grid={{ gutter: 16, column: visible?2:3 }}
        dataSource={apiMarketInfo}
        metas={{
          title: {
            dataIndex: 'apiNameCn',
            title: 'API 名称',
            //@ts-ignore
            render: (text, record) => (
              <Space>
                <Tag style={{ fontSize: '20px' }} color="blue">{text}</Tag>
              </Space>
            ),
          },
          subTitle: {
            dataIndex: 'apiType',
            title: 'api类型',
            //@ts-ignore
            render: (text, record) =>{
              const isSelected = selectedKeys.includes(record.id);
              return (
                text === 1 ? (
                  <div>
                  <Tag style={{ fontSize: '20px' }} color="green">
                    {record.paramCfgType === 0 ? '向导模式' : '自定义sql'}
                  </Tag>
                    <Tag style={{color:'red'}}>{isSelected?'已选中':''}</Tag>
                  </div>
                ) : (
                  <div>
                  <Tag style={{ fontSize: '20px' }} color="green">注册api</Tag>
                    <Tag style={{color:'red'}}>{isSelected?'已选中':''}</Tag>
                  </div>
                )
              )
            },
          },
          actions: {
            //@ts-ignore
            render: (text, record) => (
              [
                <a key={'apply'}>申请</a>,
                <a key={'invoke'} onClick={()=>{
                  navigate('/invoke', {state:{interfaceId:record.id}})
                }}>使用</a>,
              ]
            ),
          },
          content: {
            //@ts-ignore
            render: (text, record) => {
              const dateFormatter = new Intl.DateTimeFormat('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
              });
              return (
                <>
                  <Space
                    style={{ width: '100%', justifyContent: 'space-between' }}
                    size="large"
                    direction="horizontal"
                  >
                    <div>
                      <p style={{ margin: 0 }}><strong>项目名称:</strong> {record.projectName}</p>
                    </div>
                    <div>
                      <p style={{ margin: 0 }}>
                        <strong>创建时间:</strong> {dateFormatter.format(new Date(record.createAt))}
                      </p>
                    </div>
                    <div>
                      <p style={{ margin: 0 }}><strong>创建用户:</strong> {record.createUsername}</p>
                    </div>
                    <div>
                      <p style={{ margin: 0 }}>
                        <strong>更新时间:</strong> {dateFormatter.format(new Date(record.updateAt))}
                      </p>
                    </div>
                    <div>
                      <p style={{ margin: 0 }}><strong>更新用户:</strong> {record.updateUsername}</p>
                    </div>
                  </Space>

                </>
              )
            },
          },
        }}
      />
    </div>
  );
};

export default ApiMarketList;
